<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zEditor</title>
    <link rel="stylesheet" href="css/zEditor.css">
</head>
<body>
<h1>欢迎使用zEditor v1.1</h1><h2>没有任何依赖，纯粹原生JS+HTML实现一个文本编辑器。想要看更多技术文章，欢迎访问<a href="http://tuobaye.com">tuobaye.com</a>，或者给我的这个github项目<a href="https://github.com/tuobaye0711/zEditor">github.com/tuobaye0711/zEditor</a>点个star哦，谢谢啦~</h2>
<div id="wrapper">
    <div id="control-area">
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='undo' onclick="changeStyle(this.dataset)">◀撤销</a>
            <a href="#" class='btn right blue' data-command='redo' onclick="changeStyle(this.dataset)">重做▶</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='italic' onclick="changeStyle(this.dataset)">斜体</a>
            <a href="#" class='btn middle grey' data-command='bold' onclick="changeStyle(this.dataset)">粗体</a>
            <a href="#" class='btn middle grey' data-command='underline' onclick="changeStyle(this.dataset)">下划线</a>
            <a href="#" class='btn right grey' data-command='strikeThrough' onclick="changeStyle(this.dataset)">删除线</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='justifyLeft' onclick="changeStyle(this.dataset)">左</a>
            <a href="#" class='btn middle blue' data-command='justifyCenter' onclick="changeStyle(this.dataset)">居中</a>
            <a href="#" class='btn middle blue' data-command='justifyRight' onclick="changeStyle(this.dataset)">右</a>
            <a href="#" class='btn right blue' data-command='justifyFull' onclick="changeStyle(this.dataset)">两端</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='indent' onclick="changeStyle(this.dataset)">右缩进</a>
            <a href="#" class='btn right grey' data-command='outdent' onclick="changeStyle(this.dataset)">左缩进</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='insertOrderedList' onclick="changeStyle(this.dataset)">有序列表</a>
            <a href="#" class='btn right blue' data-command='insertUnorderedList' onclick="changeStyle(this.dataset)">无序列表</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='superscript' onclick="changeStyle(this.dataset)">上标</a>
            <a href="#" class='btn right grey' data-command='subscript' onclick="changeStyle(this.dataset)">下标</a>
        </div>

        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='selectAll' onclick="changeStyle(this.dataset)">全选</a>
            <a href="#" class='btn middle blue' data-command='copy' onclick="changeStyle(this.dataset)">复制</a>
            <a href="#" class='btn right blue' data-command='cut' onclick="changeStyle(this.dataset)">剪切</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left grey' data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="2" onclick="changeStyle(this.dataset)">2号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="3" onclick="changeStyle(this.dataset)">3号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="4" onclick="changeStyle(this.dataset)">4号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="5" onclick="changeStyle(this.dataset)">5号</a>
            <a href="#" class='btn middle grey' data-command='fontSize' data-value="6" onclick="changeStyle(this.dataset)">6号</a>
            <a href="#" class='btn right grey' data-command='fontSize' data-value="7" onclick="changeStyle(this.dataset)">7号</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left blue' data-command='fontName' data-value="宋体" onclick="changeStyle(this.dataset)">宋</a>
            <a href="#" class='btn middle blue' data-command='fontName' data-value="黑体" onclick="changeStyle(this.dataset)">黑</a>
            <a href="#" class='btn middle blue' data-command='fontName' data-value="楷体" onclick="changeStyle(this.dataset)">楷</a>
            <a href="#" class='btn middle blue' data-command='fontName' data-value="仿宋" onclick="changeStyle(this.dataset)">仿宋</a>
            <a href="#" class='btn right blue' data-command='fontName' data-value="微软雅黑" onclick="changeStyle(this.dataset)">雅黑</a>
        </div>
        <div class="btn-group">
            <a href="#" class='btn left' data-command='foreColor' data-value="red" onclick="changeStyle(this.dataset)" style="background-color: red">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="orange" onclick="changeStyle(this.dataset)" style="background-color: orange">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="yellow" onclick="changeStyle(this.dataset)" style="background-color: yellow">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="green" onclick="changeStyle(this.dataset)" style="background-color: green">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="cyan" onclick="changeStyle(this.dataset)" style="background-color: cyan">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="blue" onclick="changeStyle(this.dataset)" style="background-color: blue">&nbsp;&nbsp;</a>
            <a href="#" class='btn middle' data-command='foreColor' data-value="purple" onclick="changeStyle(this.dataset)" style="background-color: purple">&nbsp;&nbsp;</a>
        </div>
    </div>
    <div id="text-area" contenteditable>
        <h1>欢迎使用zEditor</h1><h2>该项目主要使用document.execCommand实现，下面是参考的MDN web docs的api文档，把所有易于实现的列出来，挨个进行实现~</h2><h3>待支持的document.execCommand api（被划掉的表示已支持）:</h3><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>bold<br></strike></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 &lt;strong&gt;标签，而不是&lt;b&gt;标签。</strike></p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>copy<br></strike></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。</strike></p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>createLink<br></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>将选中内容创建为一个锚链接。这个命令需要一个HREF URI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）</p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>cut<br></strike></li></ul><p></p></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><blockquote style="margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>&nbsp;剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。</strike></p></blockquote></blockquote><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>decreaseFontSize<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>&nbsp;给选中文字加上 &lt;small&gt; 标签，或在选中点插入该标签。(IE浏览器不支持)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>fontName<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："Arial")作为参数。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>fontSize<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>foreColor<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>formatBlock<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 &lt; &gt;, 例如 "&lt;H1&gt;".)</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>heading<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>increaseFontSize<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>indent<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>缩进选择或插入点所在的行， 在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>insertHorizontalRule<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在插入点插入一个水平线（删除选中的部分）</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>insertImage<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在插入点插入一张图片（删除选中的部分）。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>insertOrderedList<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字上创建一个有序列表</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>insertUnorderedList<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在插入点或者选中文字上创建一个无序列表。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>insertParagraph<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>italic<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I )</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyCenter<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行文字居中。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyFull<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行文本对齐。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyLeft<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行左对齐。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>justifyRight<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入位置或者所选内容进行右对齐。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>outdent<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>对光标插入行或者所选行内容减少缩进量。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>redo<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>重做被撤销的操作。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>removeFormat<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>对所选内容去除所有格式</p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>selectAll<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>选中编辑区里的全部内容。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>strikeThrough<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭删除线。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>subscript<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭下角标。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>superscript<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭上角标。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>underline<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>在光标插入点开启或关闭下划线。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li><strike>undo<br></strike></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p><strike>撤销最近执行的命令。</strike></p></blockquote></h1></blockquote><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p></p><ul><li>unlink<br></li></ul><p></p></blockquote></h1><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><h1><blockquote style="font-size: medium; font-weight: 400; margin: 0px 0px 0px 40px; border: none; padding: 0px;"><p>去除所选的锚链接的&lt;a&gt;标签</p></blockquote></h1></blockquote>    </div>
    <div id="submit-btn">
        <a href="#" class='btn left blue' onclick="console.log(document.getElementById('text-area').innerHTML)">点击打印文本区域内容（含格式，控制台查看）</a>
    </div>
</div>
<script src="js/zEditor.js"></script>
</body>
</html>